<template>
    <div>
        <div class="topStyle">
            <div class="titleStyle">物流环节</div>
        </div>
        <div class="bodyStyle">
            <div class="bodyForm">
                <div style="width: 70%;">
                    <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="环节名称" prop="linkName" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.linkName"
                                        size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="集装箱号" prop="containerNumber" class="formStyle">
                                    <el-input placeholder=" " clearable v-model="addForm.containerNumber" size="mini"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="内外贸" prop="tradeType" class="formStyle">
                                    <el-select v-model="addForm.tradeType" placeholder=" " clearable size="mini">
                                        <el-option label="内贸" value="内贸"></el-option>
                                        <el-option label="外贸" value="外贸"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="装载状态" prop="loadingStatus" class="formStyle">
                                    <el-select v-model="addForm.loadingStatus" placeholder=" " clearable size="mini">
                                        <el-option label="状态一" value="状态一"></el-option>
                                        <el-option label="状态二" value="状态二"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="进出口" prop="InOutType" class="formStyle">
                                    <el-select v-model="addForm.InOutType" placeholder=" " clearable size="mini">
                                        <el-option label="进口" value="进口"></el-option>
                                        <el-option label="出口" value="出口"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="环节时间" prop="linkTime" class="formStyle">
                                    <el-date-picker v-model="addForm.linkTime" type="daterange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" size="mini" style="width: 100%;" @change="changeTime"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                </div>
                <div style="padding-top: 7px; margin-left: 2%;">
                    <el-row>
                        <el-col :span="24">
                            <el-button type="primary" size="mini" class="buttonStyle">查 询</el-button>
                        </el-col>

                    </el-row>
                </div>
            </div>
            <div class="bodyTable">
                <div style="width: 98%;">
                    <el-table :data="tableData" stripe style="width: 100%;" height="450px">
                        <el-table-column label="环节名称" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.linkName }}</template>
                        </el-table-column>
                        <el-table-column label="集装箱号" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.containerNumber }}</template>
                        </el-table-column>
                        <el-table-column label="箱尺寸" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.cartonSize }}</template>
                        </el-table-column>
                        <el-table-column label="内外贸" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.tradeType }}</template>
                        </el-table-column>
                        <el-table-column label="装载状态" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.loadingStatus }}</template>
                        </el-table-column>
                        <el-table-column label="提单号" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.billNumber }}</template>
                        </el-table-column>
                        <el-table-column label="进出口" min-width="140px">
                            <template slot-scope="scope">{{ scope.row.InOutType }}</template>
                        </el-table-column>
                        <el-table-column label="环节时间" min-width="150px">
                            <template slot-scope="scope">{{ scope.row.linkTime }}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="footerStyle">
                <el-pagination background small @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="queryAll.startpage" :page-sizes="[10, 20, 30, 40]" :page-size="queryAll.pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="queryAll.totalNum">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'logisticsLink',
    components: {},
    data() {
        return {
            addForm: {
                linkName: "",
                containerNumber: "",
                tradeType: "",
                loadingStatus: "",
                InOutType: "",
                linkTime: "",
                linkTimeF: "",
                linkTimeN: "",
            },
            tableData: [],
            rules: {},
            queryAll: {
                startpage: 1,
                pagesize: 10,
                totalNum: 100
            },
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryAll.startpage = 1;
            this.queryAll.pagesize = val;
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryAll.startpage = val;
        },
        changeTime(value){
            console.log(value);
            this.addForm.linkTimeF = value[0]
            this.addForm.linkTimeN = value[1]
        },
    },
    computed: {
    },
    watch: {},
    mounted() {
    },

}
</script>
<style lang='scss' scoped>
.topStyle {
    background-color: #fff;
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 2%;
    position: relative;

    .titleStyle {
        font-size: 18px;
        color: #333333;
        font-weight: 600;
    }
}

.bodyStyle {
    background-color: #fff;
    margin-top: 2%;
    // height: 65vh;
    width: 100%;

    .bodyForm {
        width: 100%;
        display: flex;

        .formStyle {
            margin-right: 1%;
            margin-bottom: 1%;
        }

        .buttonStyle {
            background-color: #0F47B8;

        }
    }

    .bodyTable {
        width: 100%;
        display: flex;
        justify-content: space-around;

        :deep .el-table th.el-table__cell {
            background-color: #EEF1F5;
        }

        :deep .el-table thead {
            color: #333333;
        }
    }

    .footerStyle {
        width: 98%;
        display: flex;
        justify-content: flex-end;
        padding-top: 1%;
        padding-bottom: 1%;
        :deep .el-input--mini .el-input__inner{
            height: 22px;
        }
        :deep .el-pagination.is-background .el-pager li:not(.disabled).active{
            background-color: #0F47B8;
            color: #fff;
        }
        :deep .el-pagination.is-background .el-pager li:not(.disabled):hover{
            color: #0F47B8;
            background-color: #f4f4f5;
        }
    }
}
</style>